<template>
  <div>
    <page-layout>
      <a-row :gutter="[10, 10]">
        <a-col :span="24">
          <a-card>
            <div class="mb-20">
              <!-- 查询参数 -->
              <pro-query
                :searchParam="searchParams.params"
                @on-search="search"
                @on-reset="onReset"
              ></pro-query>
            </div>
            <!-- 列表 -->
            <pro-table
              ref="tableRef"
              :fetch="fetch"
              :columns="columns"
              :operate="operate"
              :toolbar="toolbar"
              :param="state.param"
              :pagination="pagination"
            >
            </pro-table>
          </a-card>
        </a-col>
      </a-row>
    </page-layout>
    <batch-import :visible="visible" :record="{}" @close="close"></batch-import>
    <detail
      v-if="state.detailVisible"
      :visible="state.detailVisible"
      :record="state.currentRow"
      type="pay"
      @close="close"
    ></detail>
    <detail-account
      :visible="state.visibleAccount"
      :record="state.currentRow"
      @close="close"
    ></detail-account>
    <detail-paid :visible="state.visiblePaid" :record="state.currentRow" @close="close"></detail-paid>
    <detail-closed
      :visible="visibleClosed"
      :record="state.currentRow"
      @close="close"
    ></detail-closed>
  </div>
</template>
<script>
export default {
  name: "payment-order"
}
</script>
<script setup>
import { filterEmptyByObject } from "../../tools/common";
import { page, editFinance } from "../../api/module/finance-payment";
import { reactive, onMounted, createVNode, ref } from "vue";
import { message, modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { getDictByCodesReturnObj } from "../../tools/get-dict";
import dictEnum from "../../const/dict";
import moment from "moment";
import { useI18n } from "vue-i18n";
import batchImport from "./modal/batchImport";
import detail from "./modal/detail.vue";
import detailAccount from "./modal/detailAccount.vue";
import detailPaid from "./modal/detailPaid.vue";
import detailClosed from "./modal/detailClosed.vue";

const tableRef = ref();
const { t } = useI18n();

const columns = [
  {
    title: t('financeManage.label.finance-18'),
    dataIndex: "localWaterNo",
    key: "localWaterNo",
    width: 150,
  },
  { title: t('financeManage.label.finance-19'), dataIndex: "payName", key: "payName", width: 150 },
  { title: t('financeManage.label.finance-13'), dataIndex: "payInfo", key: "payInfo", width: 150 },
  {
    title: t('financeManage.label.finance-5'),
    dataIndex: "currency",
    key: "currency",
    width: 150,
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.CURRENCY]
        ? dictLists.data[dictEnum.CURRENCY].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    },
  },
  { title: t('financeManage.label.finance-6'), dataIndex: "tradeAmt", key: "tradeAmt", width: 150 },
  { title: t('financeManage.label.finance-20'), dataIndex: "rmbAmt", key: "rmbAmt", width: 150 },
  {
    title: t('financeManage.label.finance-16'),
    dataIndex: "produceWay",
    key: "produceWay",
    width: 150,
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.GENERATION_MODE]
        ? dictLists.data[dictEnum.GENERATION_MODE].find((v) => v.value == data)
        : {};
      return item ? item.label : "";
    },
  },
  { title: t('financeManage.label.finance-21'), dataIndex: "createTime", key: "createTime", width: 150 },
  {
    title: t('financeManage.label.finance-22'),
    dataIndex: "paymentTime",
    key: "paymentTime",
    cellRender: (record, data) => {
      return data ? moment(data).format('YYYY-MM-DD') : "";
    },
    width: 150,
  },
  {
    title: t('financeManage.label.finance-23'),
    dataIndex: "saleHead",
    key: "saleHead",
    width: 150,
  },
  {
    title: t('financeManage.label.finance-24'),
    dataIndex: "asdHead",
    key: "asdHead",
    width: 150,
  },
  {
    title: t('financeManage.label.finance-25'),
    dataIndex: "checkStatus",
    key: "checkStatus",
    fixed: 'right',
    width: 150,
    cellRender: (record, data) => {
      const item = dictLists.data[dictEnum.COLLECTION_PAY_STATE]
        ? dictLists.data[dictEnum.COLLECTION_PAY_STATE].find(
            (v) => v.value == data
          )
        : {};
      return item ? item.label : "";
    },
  },
];
/// 数据来源 [模拟]
const fetch = async (param) => {
  param.fncType = 2
  let response = await page(param);
  response.data && response.data.record && response.data.record.map(item => {
    const obj = dictLists.data[dictEnum.TRADING_PARTNER] ? dictLists.data[dictEnum.TRADING_PARTNER].find(v => v.value == item.tradeType) : {}
    let partner = obj ? obj.label || '' : ''
    item.payInfo = (partner + ' | ' +  (item.payName || '')) || ''
    return item
  })
  return {
    data: response.data.record,
    total: response.data.total,
  };
};
const pagination = {
  pageNum: 1,
  pageSize: 10,
};
const router = useRouter();

let dictLists = reactive({
  data: {},
});

let searchParams = reactive({
  params: [],
});
const showModal = () => {
  visible.value = true;
};
/// 行操作
const operate = [
  // {
  //   label: "来源",
  //   event: function ({ id }) {},
  // },
  {
    label: t('financeManage.label.finance-26'),
    children: [
      {
        label: t('financeManage.label.finance-27'),
        event: function (record) {
          state.currentRow = record
          state.visibleAccount = true
        },
      },
      {
        label: t('financeManage.label.finance-28'),
        event: function (record) {
          state.currentRow = record
          state.visiblePaid = true
        },
      },
      {
        label: t('financeManage.label.finance-29'),
        event: function (record) {
          modal.confirm({
            title: `${t('financeManage.label.finance-30')}?`,
            icon: createVNode(ExclamationCircleOutlined),
            okText: t('button.determine'),
            cancelText: t('button.cancel'),
            onOk() {
              let params = {
                ...record,
                checkStatus: 4
              }
              editFinance(params).then(res => {
                if (res.success) {
                  message
                    .success({ content: t('financeManage.label.finance-31'), duration: 1 })
                    .then(() => {
                    });
                  
                } else {
                  message.error({
                    content: t('financeManage.label.finance-32'),
                    duration: 1,
                  });
                }
              })
            }
          })
        },
      },
      {
        label: t('financeManage.label.finance-33'),
        event: function (record) {
          state.currentRow = record;
          state.detailVisible = true
        },
      },
    ],
  },
];

const toolbar = [
  {
    code: "",
    label: t("button.batchImport"),
    type: "",
    event: (selectedRowKeys) => {},
  },
];
const visible = ref(false);
onMounted(async () => {
  dictLists.data = await getDictByCodesReturnObj([
    dictEnum.CURRENCY, // 币种
    dictEnum.TRADING_PARTNER, // 交易对象
    dictEnum.PAY_METHOD, // 支付方式
    dictEnum.FINANCE_TYPE, // 财务类型
    dictEnum.GENERATION_MODE, // 产生方式
    dictEnum.BILL_SOURCE, // 账单类型
    dictEnum.COLLECTION_PAY_STATE, // 收付款状态
  ]);

  searchParams.params = [
    {
      key: "actHead",
      type: "input",
      label: t('financeManage.label.finance-19'),
      placeholder: t('placeholder.pleaseEnter'),
    },
    {
      key: "tradeType",
      type: "select",
      label: t('financeManage.label.finance-4'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.TRADING_PARTNER],
    },
    {
      key: "payName",
      type: "input",
      label: t('financeManage.label.finance-15'),
      placeholder: t('placeholder.pleaseEnter'),
    },
    {
      dataIndex: "createTime",
      key: "createTime",
      keys: ["bgeinTime", "endTime"],
      type: "rangeTime",
      label: t('label.creationTime'),
      showTime: { format: "HH:mm:ss" },
      format: "YYYY:MM:DD HH:mm:ss",
      valueFormat: "YYYY:MM:DD HH:mm:ss",
      placeholder: [t('label.startTime'), t('label.endTime')],
      hidden: true,
    },
    {
      key: "checkStatus",
      type: "select",
      label: t('financeManage.label.finance-25'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.COLLECTION_PAY_STATE],
      hidden: true,
    },
    {
      key: "currency",
      type: "select",
      label: t('financeManage.label.finance-5'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.CURRENCY],
      hidden: true,
    },
    {
      key: "produceWay",
      type: "select",
      label: t('financeManage.label.finance-16'),
      placeholder: t('placeholder.all'),
      options: dictLists.data[dictEnum.GENERATION_MODE],
      hidden: true,
    },
  ];
});

const search = (value) => {
  state.param = {
    ...state.param,
    ...filterEmptyByObject(value),
    bgeinTime: value.createTime ? moment(value.createTime[0]).valueOf() : undefined,
    endTime: value.createTime ? moment(value.createTime[1]).valueOf() : undefined,
  };
};
const onReset = (value) => {
  state.param = {};
};

const state = reactive({
  selectedRowKeys: [],
  param: {},
  visibleSave: false,
  visibleEdit: false,
  visibleInfo: false,
  visibleAccount: false, // 账目红冲
  visiblePaid: false, // 付款处理
  visibleClosed: false, // 付款处理
  recordEdit: {},
  recordInfo: {},
  detailVisible: false, // 详情
  currentRow: {}
});

const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};

const close = (value) => {
  state[value] = false
};
</script>

<style scoped></style>
